Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adding axial top bottom margin to the cover block. #41963

Merged
merged 1 commit into from
Jun 28, 2022
Merged

Adding axial top bottom margin to the cover block. #41963

merged 1 commit into from
Jun 28, 2022

Conversation

ramonjd
Copy link
Member

@ramonjd ramonjd commented Jun 27, 2022

What?

Revives #33835 and fixes #41879 by bringing top and bottom margin controls to the cover block:

2022-06-27 12 09 35

Why?

Previous attempts to add this control were put in doubt due to the unavailability of the visualizer. It looks like the visualizer is looking better since #40505

How?

Via block.json

Testing Instructions

  1. In a new post, create a Cover block. Check that the dimensions panel is there and margin controls are disabled by default.
  2. Select margin under the ToolsPanel and adjust the value.
  3. Check that your changes are reflected on the published post.
  4. Edit the top and bottom margin separately.
  5. Behold your ground-breaking results and rejoice!

@ramonjd ramonjd self-assigned this Jun 27, 2022
@ramonjd ramonjd added [Block] Cover Affects the Cover Block - used to display content laid over a background image [Type] Enhancement A suggestion for improvement. [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi labels Jun 27, 2022
@ramonjd ramonjd requested a review from jasmussen June 27, 2022 02:30
@ramonjd ramonjd mentioned this pull request Jun 27, 2022
Closed
@glendaviesnz
Copy link
Contributor

glendaviesnz commented Jun 28, 2022 •
edited
Loading

I think the improved visualiser, and limiting it to top and bottom margin answers the concerns from the previous PR. The confusion over collapsing margins is certainly made clearer with the visualiser at least showing the user that something is happening even of the blocks are not moving (top cover block below has a 40px bottom margin set, so any changes to gap won't happen until bottom covers top margin exceeds 40px):

collapse.mp4

I did hit a strange glitch with the visualiser when one cover is below another, but haven't managed to work out exactly how to replicate it yet, and probably not related to this PR:

cover-margin.mp4

@glendaviesnz
Copy link
Contributor

After a page refresh I wasn't able to replicate the issue noted above, so unless someone else sees the same thing we can probably ignore for now.

@ramonjd
Copy link
Member Author

ramonjd commented Jun 28, 2022 •
edited
Loading

Thanks for testing @glendaviesnz !

After a page refresh I wasn't able to replicate the issue noted above, so unless someone else sees the same thing we can probably ignore for now.

I had a go with several cover blocks stacked, and couldn't replicate (at least on my side)

One thing I forgot to confirm is whether we can reduce the margin to 0, which I think was one of the desired outcomes.

Screen Shot 2022-06-28 at 12 02 51 pm

👍

glendaviesnz
glendaviesnz approved these changes Jun 28, 2022
View reviewed changes
Copy link
Contributor

@glendaviesnz glendaviesnz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me. I think improvements to the visualiser, along with limiting to top and bottom margins for now answers the issues raised in the previous iteration of this.

@ramonjd ramonjd merged commit c8821f1 into trunk Jun 28, 2022
@ramonjd ramonjd deleted the add/cover-block-axial-margin branch June 28, 2022 05:03
@github-actions github-actions bot added this to the Gutenberg 13.6 milestone Jun 28, 2022
@mburridge mburridge added the Needs Dev Note Requires a developer note for a major WordPress release cycle label Sep 13, 2022
@mburridge
Copy link
Contributor

Added the Needs Dev Note label in case this needs a dev note (either individual or as part of a "misc" dev note) for WP 6.1 release.

@ramonjd ramonjd removed the Needs Dev Note Requires a developer note for a major WordPress release cycle label Jun 30, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@glendaviesnz glendaviesnz glendaviesnz approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

@ryanwelcher ryanwelcher Awaiting requested review from ryanwelcher

@juanmaguitar juanmaguitar Awaiting requested review from juanmaguitar juanmaguitar is a code owner

@fabiankaegy fabiankaegy Awaiting requested review from fabiankaegy fabiankaegy is a code owner

@jasmussen jasmussen Awaiting requested review from jasmussen

Assignees

@ramonjd ramonjd

Labels
[Block] Cover Affects the Cover Block - used to display content laid over a background image [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Type] Enhancement A suggestion for improvement.
Projects
None yet
Milestone
Gutenberg 13.6
Development

Successfully merging this pull request may close these issues.

Cover Block missing margin in dimensions panel
3 participants
@ramonjd @glendaviesnz @mburridge